<template>
  <div class="success-page">
    <!-- 成功图标 -->
    <div class="success-icon">
      <img 
        src="@/static/addcar_succ-img/添加成功图标.png" 
        alt="成功图标" 
        class="icon-img"
      >
    </div>

    <!-- 成功文字 -->
    <div class="success-text">绑定成功</div>

    <!-- 倒计时提示 -->
    <div class="countdown-text">{{ countdown }}秒后自动返回</div>

    <!-- 返回按钮 -->
    <button class="return-btn" @click="handleReturn">立即返回</button>
  </div>
</template>

<script>
export default {
  name: 'AddCarSuccessPage',
  data() {
    return {
      countdown: 5, // 倒计时
      timer: null // 定时器
    }
  },
  methods: {
    // 返回车辆列表页面
    goToVehicleList() {
      // 使用 navigateBack 返回到我的车辆页面
      uni.navigateBack({
        delta: 2, // 返回2层：添加成功 -> 添加车辆 -> 我的车辆
        fail: (err) => {
          console.error('返回失败：', err);
          // 如果返回失败，使用 redirectTo 作为备选方案
          uni.redirectTo({
            url: '/my-item/mycar/mycar',
            fail: (err2) => {
              console.error('跳转失败：', err2);
              uni.showToast({ title: '页面跳转失败', icon: 'none' });
            }
          });
        }
      });
    },

    // 返回按钮点击
    handleReturn() {
      // 清除定时器
      if (this.timer) {
        clearInterval(this.timer);
        this.timer = null;
      }
      // 立即返回
      this.goToVehicleList();
    },

    // 开始倒计时
    startCountdown() {
      this.timer = setInterval(() => {
        this.countdown--;
        if (this.countdown <= 0) {
          clearInterval(this.timer);
          this.timer = null;
          this.goToVehicleList();
        }
      }, 1000);
    }
  },
  
  onLoad(options) {
    console.log('成功页面加载参数：', options);
    // 页面加载后开始倒计时
    this.startCountdown();
  },

  onUnload() {
    // 页面卸载时清除定时器
    if (this.timer) {
      clearInterval(this.timer);
      this.timer = null;
    }
  }
}
</script>

<style scoped>
/* 页面全局样式 */
.success-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 90vh;
  background-color: #ffffff;
  padding: 80rpx 40rpx;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* 成功图标 */
.success-icon {
  margin-bottom: 60rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}

.icon-img {
  width: 160rpx;
  height: 160rpx;
  object-fit: contain;
}

/* 成功文字 */
.success-text {
  font-size: 40rpx;
  color: #333333;
  font-weight: 500;
  margin-bottom: 40rpx;
  text-align: center;
}

/* 倒计时文字 */
.countdown-text {
  font-size: 28rpx;
  color: #999999;
  margin-bottom: 60rpx;
  text-align: center;
}

/* 返回按钮 */
.return-btn {
  width: 400rpx;
  padding: 24rpx 48rpx;
  background-color: #F5F5F5;
  color: #333333;
  border: none;
  border-radius: 16rpx;
  font-size: 32rpx;
  font-weight: 400;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: center;
}

.return-btn:active {
  background-color: #E5E5E5;
  transform: translateY(2rpx);
}

/* 响应式适配 */
@media (max-width: 375px) {
  .success-page {
    padding: 60rpx 30rpx;
  }
  
  .icon-img {
    width: 140rpx;
    height: 140rpx;
  }
  
  .success-text {
    font-size: 36rpx;
    margin-bottom: 30rpx;
  }
  
  .countdown-text {
    font-size: 26rpx;
    margin-bottom: 50rpx;
  }
  
  .return-btn {
    width: 360rpx;
    padding: 20rpx 40rpx;
    font-size: 30rpx;
  }
}

@media (min-width: 414px) {
  .icon-img {
    width: 180rpx;
    height: 180rpx;
  }
  
  .success-text {
    font-size: 44rpx;
    margin-bottom: 50rpx;
  }
  
  .countdown-text {
    font-size: 30rpx;
    margin-bottom: 70rpx;
  }
  
  .return-btn {
    width: 440rpx;
    padding: 28rpx 56rpx;
    font-size: 34rpx;
  }
}
</style>
